<template>
<div v-if="cart_num === null || cart_num <= 0 || (account!==null && bannerOption)">
  <div>&ensp;&ensp;<b>你也许会喜欢:</b></div>
  <div>
    <button id="change" @click="change">换一换</button>
  </div>
  <div id="item">

<!--    href="@{itemForm(itemId=EST-24)}"-->
    <a  class="cardItem"
      v-if="item1">
      <router-link :to=" {name:'item',params:{id:'EST-24'}}">
        <div class="item_card">
          <div class="item_card_pic">
            <img id="pic1" src="../assets/images/wujinxia.jpg"/>
          </div>
          <div class="item_card_content">
            <h4>无尽夏</h4>
            <div class="item_card_description">
              奶油，青提，蜜瓜，铁观音的微苦托起深度
            </div>
          </div>
        </div>
      </router-link>
    </a>
<!--    href="@{itemForm(itemId=EST-7)}"-->
    <a  class="cardItem"
       v-if="item2">
      <router-link :to=" {name:'item',params:{id:'EST-7'}}">
      <div class="item_card">
        <div class="item_card_pic">
          <img id="pic2" src="../assets/images/maoshanwang.jpg"/>
        </div>
        <div class="item_card_content">
          <h4>猫山王蛋糕</h4>
          <div class="item_card_description">
            榴莲，乳脂奶油，金色果肉，浓郁榴莲口感
          </div>
        </div>
      </div>
      </router-link>
    </a>
<!--    href="@{itemForm(itemId=EST-4)}"-->
    <a  class="cardItem"
       v-if="item3">
      <router-link :to=" {name:'item',params:{id:'EST-4'}}">
      <div class="item_card">
        <div class="item_card_pic">
          <img id="pic3" src="../assets/images/blackcube.jpg"/>
        </div>
        <div class="item_card_content">
          <h4>黑方</h4>
          <div class="item_card_description">
            白兰地酒，纯黑巧克力，白兰地的味道，纯黑巧克力的香醇
          </div>
        </div>
      </div>
      </router-link>
    </a>
<!--    href="@{itemForm(itemId=EST-23)}"-->
    <a  class="cardItem"
       v-if="item4">
      <router-link :to=" {name:'item',params:{id:'EST-23'}}">
      <div class="item_card">
        <div class="item_card_pic">
          <img id="pic4" src="../assets/images/shuiniCAKE.jpg"/>
        </div>
        <div class="item_card_content">
          <h4>水泥蛋糕</h4>
          <div class="item_card_description">
            黑芝麻，口感细腻丝滑
          </div>
        </div>
      </div>
      </router-link>
    </a>
<!--    href="@{itemForm(itemId=EST-5)}"-->
    <a  class="cardItem"
       v-if="item5">
      <router-link :to=" {name:'item',params:{id:'EST-5'}}">
      <div class="item_card">
        <div class="item_card_pic">
          <img id="pic5" src="../assets/images/orange.jpg"/>
        </div>
        <div class="item_card_content">
          <h4>橘与橙</h4>
          <div class="item_card_description">
            奶油，卡曼橘，包含不同柑橘元素，7个风味层次
          </div>
        </div>
      </div>
      </router-link>
    </a>
<!--    href="@{itemForm(itemId=EST-3)}"-->
    <a  class="cardItem"
       v-if="item6">
      <router-link :to=" {name:'item',params:{id:'EST-3'}}">
      <div class="item_card">
        <div class="item_card_pic">
          <img id="pic6" src="../assets/images/black.jpg"/>
        </div>
        <div class="item_card_content">
          <h4>布莱克</h4>
          <div class="item_card_description">
            榛子酱，黑巧克力，黑巧克力和中国榛子
          </div>
        </div>
      </div>
      </router-link>
    </a>
<!--    href="@{itemForm(itemId=EST-8)}"-->
    <a  class="cardItem"
       v-if="item7">
      <router-link :to=" {name:'item',params:{id:'EST-8'}}">
      <div class="item_card">
        <div class="item_card_pic">
          <img id="pic7" src="../assets/images/jinzhi.jpg"/>
        </div>
        <div class="item_card_content">
          <h4>金枝</h4>
          <div class="item_card_description">
            奶油，树莓，柚子，稀有水果风味
          </div>
        </div>
      </div>
      </router-link>
    </a>
<!--    href="@{itemForm(itemId=EST-9)}"-->
    <a  class="cardItem"
       v-if="item8">
      <router-link :to=" {name:'item',params:{id:'EST-9'}}">
      <div class="item_card">
        <div class="item_card_pic">
          <img id="pic8" src="../assets/images/songren.jpg"/>
        </div>
        <div class="item_card_content">
          <h4>松仁淡奶</h4>
          <div class="item_card_description">
            大兴安岭松仁，松子的香气
          </div>
        </div>
      </div>
      </router-link>
    </a>
<!--    href="@{itemForm(itemId=EST-26)}"-->
    <a  class="cardItem"
       v-if="item9">
      <router-link :to=" {name:'item',params:{id:'EST-26'}}">
      <div class="item_card">
        <div class="item_card_pic">
          <img id="pic9" src="../assets/images/molihua.jpg"/>
        </div>
        <div class="item_card_content">
          <h4>茉莉花</h4>
          <div class="item_card_description">
            奶油，茉莉花，蜜瓜，茉莉花浸的奶油
          </div>
        </div>
      </div>
      </router-link>
    </a>

  </div>
</div>
</template>

<script>
export default {
  name: "recommend"
}
</script>
<script setup>
import {onMounted, ref} from "vue";
const item1 = ref(false)
const item2 = ref(false)
const item3 = ref(false)
const item4 = ref(false)
const item5 = ref(false)
const item6 = ref(false)
const item7 = ref(false)
const item8 = ref(false)
const item9 = ref(false)
const items = [item1,item2,item3,
               item4,item5,item6,
               item7,item8,item9,]

const accountJson = sessionStorage.getItem('user')
const account = JSON.parse(accountJson)
let bannerOption =''
    if(account){
      bannerOption = account.profile.bannerOption

    }
const cart_num_json = sessionStorage.getItem('cart_num')
const cart_num = JSON.parse(cart_num_json)

const randomNums = (n, min, max) => {
  const arr = [];
  for (let i = 0; i < n; i++) {
    let ran = Math.ceil(Math.random() * (max - min) + min-1);
    while (isExist(arr, ran)) {
      ran = Math.ceil(Math.random() * (max - min) + min-1);
    }
    arr[i] = ran;
  }
  return arr;
}

const isExist = (arr, ran) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === ran) {
      return true;
    }
  }
  return false;
}

const change = () => {
  for(let i = 0; i < items.length; i++){
    items[i].value=false
  }
  let arr = randomNums(3, 0, 9)
  for(let i = 0; i < items.length; i++){
    if(isExist(arr, i)){
      items[i].value=true
    }
  }
}

//初始化—————————————————————————————————————————————————
onMounted(() => {
  console.log(account)
  console.log(bannerOption)
  console.log(cart_num)
  change()
})

</script>
<style scoped>

</style>